<template>
  <div class="search_wrapper">
    <div class="search_list">
      <div class="list" v-for="(item,index) in articles" v-if="articles">
        <router-link :to="{path:'/post/'+item.articleId}" target="_blank">
          <div class="box_wrapper">
            <div class="head_wrapper">
              <!-- 文章标题 -->
              <div class="article_title">
                <router-link :to="{path:'/post/'+item.articleId}" target="_blank">{{item.title}}</router-link>
              </div>
              <!-- 作者信息 -->
              <div class="article_info">
                <span>
                  <router-link :to="{path:'/user/'+item.uid}" target="_blank">{{item.username}}</router-link>
                </span>
                <span class="dot">·</span>
                <span>{{item.articlePostTime | timeAgo}}</span>
              </div>
            </div>
            <div class="content_wrapper">
              <div class="summary_wrapper">
                <!-- 文章摘要 -->
                <div class="article_summary">
                  <router-link
                    :to="{path:'/post/'+item.articleId}"
                    target="_blank"
                    v-html="item.articleSummaryInfo"
                  />
                </div>
                <!-- 文章操作 -->
                <div class="article_option">
                  <ul class="option_wrapper">
                    <!-- actived激活类 -->
                    <li
                      class="likes"
                      :class=" {actived:!!item.islike}"
                      @click.prevent="changeIsLike(item.islike,item.articleId,index)"
                    >
                      <i class="iconfont icon-like-active-"></i>
                      <span>{{item.articleLikes}}</span>
                    </li>
                    <li class="comments">
                      <i class="iconfont icon-pinglun"></i>
                      <span>{{item.articleComments}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 文章封面大图 -->
              <div class="article_img" v-if="item.screenShot">
                <img :src="item.screenShot" alt />
              </div>
            </div>
          </div>
        </router-link>
      </div>
      <NoMore v-if="isEnd && articles.length === 0" />
    </div>
  </div>
</template>

<script>
import NoMore from "@/components/NoMore";
export default {
  name: "search",
  components: {
    NoMore
  },
  data() {
    return {
      keyword: this.$route.query.s,
      articles: [],
      currentsize: 0,
      loading: false,
      isEnd: false
    };
  },
  watch: {
    $route(val) {
      this.keyword = val.query.s;
    },
    keyword(val) {
      this.$set(this, "articles", []);
      this.$set(this, "currentsize", 0);
      this.getArticlesByKeywords(true);
    }
  },
  methods: {
    getArticlesByKeywords(isclear) {
      if (!this.loading) {
        this.loading = true;
        let id = this.$store.state.user.uid;
        this.$axios
          .get("/getArticlesByKeyword", {
            headers: {
              "Content-type": "application/x-www-form-urlencoded"
            },
            params: {
              keyword: this.keyword,
              currentsize: this.currentsize,
              uid: id,
              size: 20
            }
          })
          .then(res => {
            this.loading = false;
            if (isclear) {
              this.currentsize = res.data.data.length;
              this.articles = res.data.data;
            } else {
              this.currentsize += res.data.data.length;
              this.articles = this.articles.concat(res.data.data);
            }

            if (res.data.data.length < 20) {
              this.isEnd = true;
            } else {
              this.isEnd = false;
            }
          })
          .catch(err => {
            this.loading = false;
            console.log(err.response);
          });
      } else {
        return;
      }
    },

    //鼠标滚动异步请求数据
    scroll() {
      window.onscroll = () => {
        // 距离底部200px时加载一次
        let bottomOfWindow =
          document.documentElement.offsetHeight -
            document.documentElement.scrollTop -
            window.innerHeight <=
          100;
        if (bottomOfWindow && this.loading == false) {
          this.loading = true;
          if (!this.isEnd) {
            this.loading = false;
            this.getArticlesByKeywords(false);
          } else {
            this.loading = false;
          }
        }
      };
    },

    //点赞或取消点赞
    changeIsLike(islike, articleid, index) {
      if (!this.loading) {
        //点赞或取消点赞前先判断用户是否登录
        let isLogin = this.$store.state.isAuthenticated;
        let uid = this.$store.state.user.uid;
        // 若未登录则要求登录
        if (isLogin) {
          let action;
          if (!!islike) {
            action = "/unlike";
          } else {
            action = "/like";
          }
          this.$axios
            .get(action, {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              // 取消点赞图标激活类
              this.articles[index].islike = !this.articles[index].islike;
              // 点赞数+1/-1
               if (!islike) {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes + 1;
              } else {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes - 1;
              }
              this.loading = false;
            })
            .catch(err => {
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          // 弹出登录框
          this.$store.dispatch("setIsToLogin", true);
        }
      } else {
         return;
      }
    }
  },
  mounted() {
    this.getArticlesByKeywords(true);
    this.scroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style lang='scss'>
.search_wrapper {
  max-width: 960px;
  margin: 2rem auto;
  .search_list {
    max-width: 700px;
    .list {
      background-color: #fff;
      border-bottom: 1px solid #eee;
      a {
        color: #000;
      }
      .box_wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 18px 18px;
        .head_wrapper {
          color: #b2bac2;
          .article_title {
            color: #000;
            font-size: 20px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            a:hover {
              text-decoration: underline;
            }
          }
          .article_info {
            margin-top: 5px;
            .dot {
              padding: 0 5px;
            }
            a {
              color: inherit;
            }
            a:hover {
              color: #007fff;
            }
          }
        }
        .content_wrapper {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 5px;
          .summary_wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            align-content: space-between;
            .article_summary {
              flex: 1;
            }
            .article_option {
              margin-top: 10px;
              .option_wrapper {
                display: inline-block;
                border: 0.5px solid #e3e3e3;
                .actived {
                  color: #19be6b;
                }
                li {
                  float: left;
                  padding: 0 10px;
                  color: #909090;
                  height: 30px;
                  line-height: 30px;
                  i {
                    font-size: 15px;
                  }
                  span {
                    font-size: 0.9rem;
                    font-weight: 700;
                    padding-left: 5px;
                  }
                }
                li:nth-child(1) {
                  border-right: 0.5px solid #e3e3e3;
                }
              }
            }
          }
          .article_img {
            margin-left: 25px;
            height: 60px;
            width: 60px;
            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .search_wrapper .search_list {
    max-width: 100%;
  }
}
</style>